import React, { PureComponent } from 'react'
import { connect } from 'react-redux'
import Topic from './components/Topic'
import List from './components/List'
import Recommend from './components/Recommend'
import Writer from './components/Writer'

import { actionCreators } from './store'

import {
    HomeWraper,HomeLeft,HomeRight,BackTop
} from './style'

 class Home extends PureComponent {
 
    handleScrollTop(){
        window.scrollTo(0,0)
    }

    render() {
        return (
            <div>
                <HomeWraper > 
                    <HomeLeft >   
                        <img className="banner-image" alt=""  src="" />    
                        <Topic />
                        <List /> 
                    </HomeLeft>

                    <HomeRight >  
                        <Recommend />
                        <Writer />
                   </HomeRight> 

                   {
                       this.props.showScroll ?  <BackTop onClick={this.handleScrollTop}>回到顶部</BackTop> : null
                   }
                    
                </HomeWraper> 
            </div>
        )
    }

    componentDidMount(){
        this.props.changeHomeData() 
        this.bindEvents() 
    }

    componentWillUnmount(){
        window.removeEventListener('scroll',this.props.changeScrollTopShow)
    }

    bindEvents(){
        window.addEventListener('scroll',this.props.changeScrollTopShow)
    }
}
 
const mapState = (state) => ({
    showScroll: state.getIn(['home','showScroll'])
})

const mapDispatch = (dispatch) => ({
    changeHomeData(){
       const action = actionCreators.getHomeInfo()
       dispatch(action)
    }, 
    changeScrollTopShow(){
        // console.log(document.documentElement.scrollTop);
        if(document.documentElement.scrollTop > 400){
            dispatch(actionCreators.toggleTopShow(true))
        }else{
            dispatch(actionCreators.toggleTopShow(false))
        }
    }
})

export default connect(mapState,mapDispatch)(Home)